<!-- 人员预警 -->
<template>
  <div class="warning-container">
    <div class="gauge-container">
      <!-- 1代表旷课 -->
      <div class="gauge-wrapper">
        <div class="gauge-title">未提交作业</div>
        <div id="gauge1" class="gauge"></div>
      </div>
      <!-- 0代表未提交作业 -->
      <div class="gauge-wrapper">
        <div class="gauge-title">旷课</div>
        <div id="gauge2" class="gauge"></div>
      </div>
    </div>
  </div> 
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Warning',
  data() {
    return {
      data: {
        missionType: this.$store.state.mission,
        studentClassId: this.$store.state.current
      },
      num: 0,
      rank: [{
        category: 0,
        occurrence_times: [],
        student_id: [],
        student_name: [],
        total_count: 0,
        total_students: 0
      },
      {
        category: 1,
        occurrence_times: [],
        student_id: [],
        student_name: [],
        total_count: 0,
        total_students: 0
      }],
      gauge1: null,
      gauge2: null
    }
  },
  computed: {
    studentClassId() {
      return this.$store.state.current;
    },
    missionType() {
      return this.$store.state.mission;
    }
  },
  watch: {
    studentClassId() {
      this.data.studentClassId = this.studentClassId;
      this.fetchData();
    },
    missionType() {
      this.data.missionType = this.missionType;
      this.fetchData();
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.post("/group/warningData", this.data);
        const data = response.data.data || [];
        if (data.length > 0) {
          this.num = data[0].total_students;
          if (data.length === 2) {
            this.rank = data;
          } else if (data.length === 1) {
            this.rank[data[0].category] = data[0];
          }
          this.initCharts();
        }
      } catch (error) {
        console.error('获取数据失败', error);
        this.resetData();
      }
    },
    resetData() {
      this.rank = this.rank.map(item => ({
        ...item,
        occurrence_times: [],
        student_id: [],
        student_name: [],
        total_count: 0,
        total_students: 0
      }));
      this.num = 0;
    },
    initGauge(domId, value) {
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(14, 19, 39, 0.95)',
          borderColor: '#31F3FF',
          borderWidth: 1,
          textStyle: {
            color: '#31F3FF',
            fontSize: 14,
            fontFamily: 'Arial, sans-serif'
          },
          extraCssText: `
            box-shadow: 0 0 15px rgba(49, 243, 255, 0.3);
            backdrop-filter: blur(5px);
            border-radius: 8px;
            padding: 8px;
            line-height: 1.8;
          `,
          formatter: function(params) {
            const category = domId === 'gauge1' ? 0 : 1;
            const rank = this.rank[category];
            let tooltipContent = '';
            
            if (rank.student_name && rank.student_name.length > 0) {
              tooltipContent = rank.student_name.map((name, index) => {
                return `<div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
                  <span style="color: #31F3FF;">${name}</span>
                  <span style="color: #00A0E9; margin-left: 15px; background: rgba(0,160,233,0.1); padding: 2px 8px; border-radius: 4px;">${rank.occurrence_times[index]}次</span>
                </div>`;
              }).join('');
            }
            
            return `<div style="padding: 8px;">
              <div style="color: #31F3FF; font-size: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(49,243,255,0.2); padding-bottom: 4px;">
                ${domId === 'gauge1' ? '未提交作业' : '旷课'}详情
              </div>
              ${tooltipContent || '<div style="color: #31F3FF; font-size: 12px;">暂无数据</div>'}
            </div>`;
          }.bind(this)
        },
        series: [{
          name: "外部线",
          type: "gauge",
          radius: '100%',
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [[1, 'rgba(49,243,255,0.3)']],
              width: 3
            }
          },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          detail: { show: false },
          title: { show: false }
        },
        {
          name: '外部刻度',
          type: 'gauge',
          radius: '90%',
          min: 0,
          // 最大值
          max: this.num,
          splitNumber: Math.min(10, this.num),
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: false,
            lineStyle: {
              color: [[1, 'rgba(0,0,0,0)']]
            }
          },
          axisLabel: {
            show: true,
            color: '#31F3FF',
            fontSize: 16,
            distance: -25,
            formatter: function (value) {
              return Math.round(value);
            }
          },
          axisTick: { show: false },
          splitLine: { show: false }
        },
        {
          name: "内部宽线条",
          type: "gauge",
          radius: '75%',
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [[1, 'rgba(18,43,60,0.8)']],
              width: 50
            }
          },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          detail: { show: false },
          title: { show: false }
        },
        {
          name: "内部细线条",
          type: "gauge",
          radius: '60%',
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [[1, 'rgba(18,43,60,0.6)']],
              width: 4
            }
          },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          detail: { show: false },
          title: { show: false }
        },
        {
          name: "间隔条形",
          type: "gauge",
          radius: '72.5%',
          z: 4,
          splitNumber: 35,
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: { opacity: 0 }
          },
          axisLabel: { show: false },
          axisTick: {
            show: true,
            length: 25,
            splitNumber: 1,
            lineStyle: {
              color: 'rgba(18,43,60,0.8)',
              width: 2
            }
          },
          splitLine: { show: false },
          detail: { show: false },
          title: { show: false }
        },
        {
          name: "数据",
          type: "gauge",
          radius: '72.5%',
          z: 3,
          startAngle: 225,
          max: this.num,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [
                [value / this.num, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#31F3FF' },
                  { offset: 1, color: '#00A0E9' }
                ])],
                [1, 'rgba(24,83,99,0.3)']
              ],
              width: 25
            }
          },
          pointer: {
            show: true,
            width: 4,
            itemStyle: {
              color: '#31F3FF',
              shadowColor: 'rgba(49,243,255,0.8)',
              shadowBlur: 10
            }
          },
          data: [{
            name: '',
            value: value
          }]
        },
        {
          name: '指针光效',
          type: 'gauge',
          radius: '72.5%',
          z: 2,
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            lineStyle: {
              color: [[1, 'rgba(0,0,0,0)']],
              width: 25
            }
          },
          pointer: {
            show: true,
            width: 8,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgba(49,243,255,0.2)' },
                { offset: 1, color: 'rgba(49,243,255,0.1)' }
              ]),
              shadowColor: 'rgba(49,243,255,0.5)',
              shadowBlur: 15
            }
          },
          data: [{
            name: '',
            value: value
          }]
        },
        {
          name: '内圆环',
          type: 'pie',
          radius: ['6%', '3%'],
          hoverAnimation: false,
          tooltip: { show: false },
          cursor: "default",
          labelLine: { normal: { show: false } },
          itemStyle: {
            color: 'rgba(18,43,60,0.8)'
          },
          animation: false,
          data: [1]
        },
        {
          name: '内圆环2',
          type: 'pie',
          radius: '3%',
          hoverAnimation: false,
          cursor: "default",
          tooltip: { show: false },
          labelLine: { normal: { show: false } },
          itemStyle: {
            color: '#31F3FF',
            shadowColor: 'rgba(49,243,255,0.5)',
            shadowBlur: 15
          },
          animation: false,
          data: [1]
        }]
      };

      const chart = echarts.init(document.getElementById(domId));
      chart.setOption(option);
      return chart;
    },
    initCharts() {
      // 数值切换
      this.gauge1 = this.initGauge('gauge1', this.rank[0].total_count);
      this.gauge2 = this.initGauge('gauge2', this.rank[1].total_count);
    },
    startAnimation() {
      if (this.animationTimer) {
        clearInterval(this.animationTimer);
        this.animationTimer = null;
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer);
    }
    if (this.gauge1) {
      this.gauge1.dispose();
    }
    if (this.gauge2) {
      this.gauge2.dispose();
    }
  }
}
</script>

<style scoped>
.warning-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(14, 19, 39, 0.95) 0%, rgba(14, 19, 39, 0.8) 100%);
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(49, 243, 255, 0.15);
}

.warning-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg, transparent 48%, rgba(49, 243, 255, 0.1) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(49, 243, 255, 0.1) 50%, transparent 52%);
  background-size: 30px 30px;
  opacity: 0.3;
  pointer-events: none;
}

.gauge-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90%;
  gap: 20px;
}

.gauge-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background: rgba(18, 43, 60, 0.3);
  border-radius: 15px;
  border: 1px solid rgba(49, 243, 255, 0.2);
  box-shadow:
    0 0 20px rgba(49, 243, 255, 0.1),
    inset 0 0 20px rgba(49, 243, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

.gauge-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(49, 243, 255, 0.1) 0%, transparent 70%);
  animation: rotate 10s linear infinite;
  pointer-events: none;
}

.gauge-wrapper:hover {
  transform: translateY(-5px);
  box-shadow:
    0 5px 30px rgba(49, 243, 255, 0.2),
    inset 0 0 30px rgba(49, 243, 255, 0.1);
  border-color: rgba(49, 243, 255, 0.3);
}

.gauge-title {
  font-size: 20px;
  color: #31F3FF;
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(49, 243, 255, 0.7);
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
}

.gauge-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #31F3FF, transparent);
}

.gauge {
  width: 100%;
  height: 300px;
  position: relative;
  margin-top: 10px;
}

.gauge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(49, 243, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse 3s ease-in-out infinite;
}

.gauge-info {
  margin-top: 20px;
  width: 100%;
  padding: 15px;
  background: rgba(18, 43, 60, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(49, 243, 255, 0.1);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #31F3FF;
  font-size: 14px;
  opacity: 0.8;
}

.value {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(49, 243, 255, 0.5);
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(49, 243, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 30px rgba(49, 243, 255, 0.4);
  }

  100% {
    box-shadow: 0 0 10px rgba(49, 243, 255, 0.2);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.gauge-wrapper {
  animation: glow 3s infinite;
}
</style>